<%@ page import="com.demo.main.utils.ServletUtil" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:include page="/WEB-INF/common/urls.jsp"/>
<html>
<head>
    <title>${applicationScope.PROJECT_NAME}-用户图书管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <meta name="author" content="zwz">
    <%--图标icon--%>
    <link rel="icon" href="${pageContext.request.contextPath}/favicon.ico" type="image/ico">
    <%--样式CSS--%>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/materialdesignicons.min.css">
    <%--    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">--%>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/lib/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/global.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <%--为了让前端页面与后端Servlet进行交互以动态显示今日借出图书的总数，需要使用AJAX（Asynchronous JavaScript and XML）从Servlet获取数据，并更新页面上的内容。--%>
    <%--确保你的前端页面已经包含了jQuery库--%>
    <script src="${pageContext.request.contextPath}/lib/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/toast-manager.js"></script>
</head>
<body>
<!-- 定义一个导航栏，使用Bootstrap的navbar类，并设置其为展开、深色背景和次要背景色 -->
<header class="navbar navbar-expand-lg navbar-dark bg-body-secondary">
    <!-- 容器流体类，用于使内容在页面上居中对齐 -->
    <div class="container-fluid">
        <!-- 导航栏品牌链接，包含一个SVG图标和一个项目名称 -->
        <a class="navbar-brand navbar-logo" href="#">
            <!-- SVG图标，用于显示品牌的Logo -->
            <svg class="logo" width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
                <!-- 第一个路径元素，绘制Logo的一部分轮廓 -->
                <path d="M10,5 L30,5 L35,10 L35,35 L5,35 L5,10 L10,5" fill="none" stroke="#1E88E5" stroke-width="2"/>
                <!-- 第二个路径元素，绘制Logo的另一部分轮廓 -->
                <path d="M10,5 L10,10 L5,10" fill="none" stroke="#1E88E5" stroke-width="2"/>
                <!-- 第三个路径元素，绘制Logo中的线条 -->
                <path d="M12,15 L28,15 M12,20 L28,20 M12,25 L28,25 M12,30 L28,30" stroke="#1E88E5" stroke-width="1.5"/>
            </svg>
            <!-- 显示项目名称，使用EL表达式动态插入项目名称 -->
            <span>${applicationScope.PROJECT_NAME}</span>
        </a>
    </div>
</header>

<main class="main">
    <!-- 侧边栏 -->
    <jsp:include page="sidebar.jsp"/>
    <!-- 主体部分 -->
    <div class="main-content">
        <div class="container-fluid p-t-15">
            <div class="row">
                <div class="col-sm-6 col-md-3">
                    <div class="card bg-danger">
                        <div class="card-body clearfix">
                            <div class="pull-right">
                                <p class="h6 text-white m-t-0">今日借出图书数量</p>
                                <!-- 使用一个具有唯一ID的元素来存储借书总数 -->
                                <p class="h4 text-white m-b-0 fa-1-5x" id="todayBorrowCount">加载中...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-md-3">
                    <div class="card bg-info">
                        <div class="card-body clearfix">
                            <div class="pull-right">
                                <p class="h6 text-white m-t-0">今日归还图书数量</p>
                                <p class="h4 text-white m-b-0 fa-1-5x" id="todayReturnCount">加载中...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-md-3">
                    <div class="card bg-yellow">
                        <div class="card-body clearfix">
                            <div class="pull-right">
                                <p class="h6 text-white m-t-0">用户总量</p>
                                <p class="h4 text-white m-b-0 fa-1-5x" id="userCount">加载中...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-md-3">
                    <div class="card bg-pink">
                        <div class="card-body clearfix">
                            <div class="pull-right">
                                <p class="h6 text-white m-t-0">发布公告</p>
                                <p class="h4 text-white m-b-0 fa-1-5x" id="noticeCount">加载中...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid p-t-15">
            <div class="row">
                <div class="col-sm-6 col-md-3">
                    <div class="card bg-cyan">
                        <div class="card-body clearfix">
                            <div class="pull-right">
                                <p class="h6 text-white m-t-0">今日最受欢迎图书</p>
                                <!-- 使用一个具有唯一ID的元素来存储借书总数 -->
                                <p class="h4 text-white m-b-0 fa-1-5x" id="category_name">加载中...</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6 col-md-3">
                    <div class="card bg-gray">
                        <div class="card-body clearfix">
                            <div class="pull-right">
                                <p class="h6 text-white m-t-0">最受欢迎图书借出</p>
                                <p class="h4 text-white m-b-0 fa-1-5x" id="borrow_count">加载中...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="card">
                <div class="card-header">
                    <h4>图书借出趋势</h4>
                </div>
                <div class="card-body">
                    <canvas class="js-chartjs-lines" id="myChart"></canvas>
                </div>
            </div>
        </div>

        <div>
            <jsp:include page="/footer"/>
</body>
<!--使用图表插件Chart.js-->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Chart.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        // 定义一个函数来获取并更新数据,将结果以JSON格式写入响应
        function fetchData() {
            fetch('<%= request.getContextPath() %>/' + '<%= ServletUtil.PERMISSION_PATH_ADMIN %>/data_analysis_condition')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('响应错误！');
                    }
                    return response.json();
                })
                .then(data => {
                    // 更新页面上的借书总数
                    $('#todayBorrowCount').text(data.todayBorrowCount + " 本");
                    $('#todayReturnCount').text(data.todayReturnCount + " 本");
                    $('#userCount').text(data.userCount + " 人");
                    $('#noticeCount').text(data.noticeCount + " 条");
                    $('#category_name').text(data.category_name + " 类");
                    $('#borrow_count').text(data.borrow_count + " 本");
                })
                .catch(error => {
                    console.error('There has been a problem with your fetch operation:', error);
                });
        }

        fetchData();
        setInterval(fetchData, 10000);
    });
</script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: [], // 初始为空，稍后会填充
            datasets: [{
                label: '过去七天借出的图书数量趋势',
                data: [], // 初始为空，稍后填充
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    $(document).ready(function () {
        function fetchData1() { // 定义一个函数来获取并更新数据
            fetch('<%= request.getContextPath() %>/' + '<%= ServletUtil.PERMISSION_PATH_ADMIN %>/data_analysis_condition')
                .then(response => response.json())
                .then(data => {
                    console.log('Fetched data:', data); // 调试信息
                    updateChartData(data); // 调用函数来处理数据
                })
                .catch(error => console.error('Error fetching data:', error));
        }

        function updateChartData(data) { // 提取数据
            const dates = [data.date1, data.date2, data.date3, data.date4, data.date5, data.date6, data.date7];
            const booksCounts = [data.books1, data.books2, data.books3, data.books4, data.books5, data.books6, data.books7];
            console.log('Dates:', dates); // 调试信息
            console.log('Books Counts:', booksCounts); // 调试信息
            myChart.data.labels = dates; // 更新图表数据集
            myChart.data.datasets[0].data = booksCounts;
            myChart.update(); // 重新渲染图表
        }

        fetchData1(); // 初次加载时获取数据
        setInterval(fetchData1, 10000); // 每10秒刷新一次数据
    });
</script>
</html>